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SYSTEM AND METHOD OF CREATING INTERACTIVE VISUAL CONTENT 



BACKGROUND 

This disclosure relates to systems and methods for creating interactive visual content. 

A markup language is a tool for describing the structure and content of an electronic 
document that is to be viewed or printed on a computer output device such as a computer 
5 monitor or printer. Conventional markup languages typically include instructions for 

describing visual content that is displayed when the electronic document is viewed or printed. 
Such visual content can include text and graphics. For example, one such set of instructions 
can be used to retrieve and display an image stored at a specified location (e.g., on a disk 
drive). Conventional markup languages often also include instructions that allow a designer 
10 of such a document to embed user interface controls, applets, and scripts in the document. 

This allows the designer to create an interactive document that can receive information from 
a user viewing the document and/or perform some operation (e.g., perform a calculation or 
change the displayed visual content). 

One example of a markup language is the hypertext markup language (HTML). 
15 HTML is commonly used to describe HTML documents that are read and displayed by web 
browser applications. It is common for such HTML documents to specify that one or more 
images are to be displayed by the web browser as a part of the HTML document. Typically, 
an web browser will retrieve an HTML document and any associated images from a remote 
server using a computer network such as the Internet. In order to facilitate transmission 
20 across a computer network, a large image associated with such an HTML document can be 
divided into several smaller slices, which can be separately stored and transmitted across the 
computer network to the web browser. When the web browser displays the HTML 
document, the browser typically reassembles the sliced image by displaying the slices in an 
HTML table. 

25 Such image slicing techniques are also used to create visual effects such as "rollover" 

effects. For example, the designer of an HTML document can identify a particular slice of a 
sliced image as a trigger slice (also referred to as a "hotspot"). Then, the designer can embed 
JAVASCRIPT™ instructions in the HTML document, which are executed by the application 
used to view the document. The embedded instructions can include instructions that replace 

30 the trigger slice in the HTML table with a different image slice (referred to here as a "swap 



slice") when a specified user interface event occurs (referred to here as the "trigger event"). 
Instead of, or in addition to, swapping the trigger slice, the embedded instructions can 
include instructions that replace other slices in the HTML table with other swap slices when 
the trigger event occurs (this operation is commonly referred to as a "secondary rollover 
5 effect"). Examples of trigger events include the user moving the cursor over the trigger slice 
(commonly referred to as a "rollover" event), the user clicking a mouse button while the 
cursor is positioned over the trigger slice (commonly referred to as a "mouse down" event), 
and the user subsequently releasing the mouse button while the cursor is positioned over the 
trigger slice (commonly referred to as a "mouse up" event). 

10 Manually creating such visual effects can be tedious, however. Some conventional 

computer graphics programs automatically generate the HTML and JAVASCRIPT 
instructions required to create such visual effects. Such conventional graphics programs 
typically require a designer of such an HTML document to identify manually image slices 
that the web browser will replace with swap slices when the trigger event occurs. After the 

15 designer has identified the image slices that will be replaced, such conventional computer 
graphics programs typically allow the designer to create each swap slice, for example, by 
editing a copy of the image slice that will be replaced. However, typically the designer must 
make such edits within the confines of the selected image slices. 

SUMMARY 

20 In general, in one aspect, the invention features a computer-implemented method of 

creating interactive visual content for display by a viewing application executing on a 
computer. The method can include receiving as an input a selection of a trigger event and 
receiving as an input intermediate visual content. The method can also include automatically 
identifying a plurality of regions of the interactive visual content in which swap visual 

25 content is to be displayed by the viewing application when the trigger event occurs. 

Moreover, the method can include automatically generating the swap visual content from the 
intermediate visual content. 

Advantageous implementations include one or more of the following features. The 
method can also include generating instructions operable to cause the computer executing the 

30 viewing application to display the swap visual content in the identified regions when the 
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trigger event occurs. Also, the method can include receiving as an input base visual content, 
and automatically generating viewing visual content from the base visual content for display 
by the viewing application. In the method, the trigger event can be associated with the base 
visual content. 

5 Optionally, the method can include providing a content division structure that divides 

the viewing visual content into a plurality of sections. Automatically identifying the set of 
regions of the interactive visual content can also include automatically identifying those 
sections of the visual content in which swap visual content is to be displayed by the viewing 
application when the trigger event occurs. 

10 In another aspect, a computer program product is tangibly stored on a computer- 

readable medium for generating interactive visual content to be displayed by a viewing 
application executing on a computer. The computer program product can include program 
instructions operable to cause a programmable processor to receive as an input a selection of 
a trigger event associated and receive as an input intermediate visual content. The computer 

15 program product also can include program instructions operable to cause a programmable 

processor to automatically identify a set of regions of the interactive visual content in which 
swap visual content is to be displayed by the viewing application when the trigger event 
occurs, and automatically generate the swap visual content from the intermediate visual 
content. 

20 Advantageous implementations include one or more of the following features. The 

computer program product can include program instructions operable to cause the 
programmable processor to generate output instructions operable to cause the computer 
executing the viewing application to display the swap visual content in the identified regions 
when the trigger event occurs. Also, the computer program product can include program 

25 instructions operable to cause the programmable processor to receive as an input base visual 
content, and automatically generate viewing visual content derived from the base visual 
content for display by the viewing application. The trigger event can be associated with the 
base visual content. 

Optionally, the computer program product can include program instructions operable 
30 to cause the programmable processor to provide a content division structure that divides the 
viewing visual content into a plurality of sections, and automatically identify those sections 



of the visual content in which swap visual content is to be displayed by the viewing 
application when the trigger event occurs. 

Advantages that can be seen in implementations of the invention include one or more 
of the following, A computer graphics program can automatically identify those portions of 
5 interactive visual content in which swap visual content is to be displayed when a trigger 

event occurs. By using such a computer graphics program, a designer can create interactive 
visual content without having to identify manually such portions of the interactive visual 
content. Such an identification operation can identify those portions of the intermediate 
visual content that visually differ from the base visual content. In this way, the amount of 
10 swap visual content (which is generated from the identified portions of the intermediate 

visual content) can be reduced. This can reduce the time and resources necessary to transmit 
and display the swap visual content (especially over a computer network such as the 
Internet). 

One way in which such an identification operation can be performed is by calculating 
1 5 a checksum for a given slice of the intermediate visual content and a checksum for the 

corresponding slice of the base visual content. For example, cyclic redundancy check (CRC) 
checksums can be calculated, in a conventional manner, using the pixel data for the given 
slice of the intermediate visual content and the corresponding slice of the base visual content, 
respectively. The CRC checksums can be calculated each time the designer makes an edit 
20 that affects the slice of the intermediate visual content and/or the corresponding slice of the 
base visual content. Then, if it is determined that the checksum for the slice of the 
intermediate visual content differs from the checksum for the base visual content, that slice of 
the intermediate visual content can be identified as visually differing from the corresponding 
slice of the base visual content. The use of such checksums can improve the performance of 
25 such an identification operation. 

Also, a computer graphics program can provide a user interface enabling a designer to 
edit intermediate visual content as an integral unit. This allows the designer to edit 
intermediate visual content used to generate swap visual content without regard to slice or 
region boundaries. 
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The details of one or more embodiments of the invention are set forth in the drawings 
and the description below. Other features, objects, and advantages of the invention will be 
apparent from the description and drawings, and from the claims. 

DESCRIPTION OF DRAWINGS 

FIG. 1 is a block diagram of a system for creating interactive visual content. 

FIG. 2 is a flow diagram of a process for generating interactive visual content. 

FIG. 3 is flow diagram of an operation that can be performed on each region of the 
base visual content to automatically identify a set of regions of the viewing visual content in 
which a viewing application is to display swap visual content when a trigger event occurs. 

FIG. 4 is flow diagram of a process for creating an interactive HTML document using 
a computer graphics program. 

FIG. 5 A shows an example of a sliced image. 

FIGS. 5B-5C show an example of a user interface that allows a designer to edit 
intermediate visual content as an integral unit. 

FIG. 6 is a schematic representation of a set of viewing image files generated from a 
base visual content of the image shown in FIGS. 5A-5C. 

FIG. 7 is a flow diagram of an operation that automatically identifies slices of 
intermediate visual content that visually differ from corresponding slices of base visual 
content. 

FIG. 8 is a schematic representation of a set of swap image files generated from slices 
of the intermediate visual content of the image shown in FIGS 5A-5C. 

FIG. 9 shows a viewing application displaying the visual content shown in FIG. 6. 

FIG. 10 shows a viewing application displaying the swap content shown in FIG. 8. 

FIG. 1 1 is a flow diagram of an alternative operation that automatically identifies 
slices of intermediate visual content that visually differ from corresponding slices of base 
visual content. 

Like reference symbols in the various drawings indicate like elements. 

DETAILED DESCRIPTION 
FIG. 1 is a block diagram of a system 100 for creating interactive visual content. The 
system 100 includes a computer graphics program 102 that is operated by a designer 104 of 



interactive visual content. In response to input from the designer 104, the computer graphics 
program 102 generates interactive visual content 106. The interactive visual content 106 
includes viewing visual content 108, swap visual content 110, and instructions 112. The 
viewing visual content 108 and swap visual content 110 can include any type of electronic 
5 image, which can include textual and/or non-textual elements. For example, the viewing 

visual content 108 and the swap visual content 110 can be raster images and/or vector images 

A viewing application 114 reads the interactive visual content 106 and initially 
displays at least a portion of the viewing visual content 108 for a user 116. The instructions 
112 included in the interactive visual content 106 can include instructions that cause the 
10 viewing application 114 to replace one or more portions of the viewing visual content 108 
with one or more corresponding portions of the swap visual content 1 1 0. One example of 
interactive visual content 106 is an HTML document that includes a sliced image and 
embedded JAVASCRIPT instructions for swapping one or more image slices with one or 
more corresponding swap slices. 
15 FIG. 2 is a flow diagram of a process 200 for generating interactive visual content. 

The computer graphics program 102 can be implemented using the process 200. Process 200 
includes receiving base visual content (block 202). The base visual content will be used to 
generate the viewing visual content that the viewing application 114 initially displays. The 
base visual content can include any type of electronic image, including textual and/or non- 
20 textual elements. For example, the base visual content can be received by having a designer 
create an image using image creation and editing features included in the computer graphics 
program 102 (e.g., the image creation and editing features of the type found in the ADOBE 
PHOTOSHOP® computer graphics program). Other examples of receiving base visual 
content include retrieving an image from electronic storage (e.g., by retrieving an image file 
25 from a disk drive) and copying at least a portion of an existing image. 

Process 200 also includes receiving a selection of a trigger event associated with the 
base visual content (block 204). Any event can be selected as the trigger event, including, 
for example, user interface events such as moving the cursor over a specified portion of the 
interactive visual content, pressing and/or releasing a mouse button while the cursor is 
30 located over the specified portion of the interactive visual content, or pressing a specified key 
on the keyboard. For example, the selection can be received by having the designer input 
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information indicative of a selected event by manipulating conventional graphical user 
interface elements such as menus, buttons, and/or selection lists in order to select a trigger 
event. Alternatively, a default trigger event can be retrieved and used as the trigger event 
unless the designer explicitly selects a different trigger event. 
5 Then, intermediate visual content is received (block 206). The intermediate visual 

content is used to generate swap visual content that the viewing application 114 will display 
in place of portions of the viewing visual content when the trigger event occurs. Each region 
of the intermediate visual content corresponds to a region of the base visual content (though 
not every region of the base visual content need have a corresponding region of the 

10 intermediate visual content). The intermediate visual content can include any type of 
electronic image, including textual and/or non-textual elements. For example, the 
intermediate visual content can be received by having the designer create an image using 
image creation and editing features included in the computer graphics program 102. Other 
examples of receiving intermediate visual content include retrieving an image from 

15 electronic storage (e.g., by retrieving an image file from a disk drive) and copying at least a 
portion of an existing image (e.g., the base visual content). 

Process 200 also includes automatically generating viewing visual content derived 
from the base visual content (block 208). As noted above, the viewing application 114 
initially displays at least a portion of the viewing visual content. Each region of the viewing 

20 visual content has a corresponding region in the base visual content, and each region of the 
intermediate visual content has a corresponding region of the viewing visual content. 
Parameters that specify how the viewing visual content is to be generated automatically can 
be received, for example, from the designer; instead, or in addition, default parameters can be 
used. The viewing visual content can be generated by simply copying the base visual 

25 content. Alternatively, various image processing operations can be performed on the base 
visual content in order to generate the viewing visual content. For example, the format in 
which the viewing visual content is stored can be changed from the format in which the base 
visual content was stored (e.g., to improve the compression of the viewing visual content for 
transmission over a computer network). Also, the colors of the base visual content can be 

30 mapped to web-safe colors in order to optimize the viewing visual content for display by the 
viewing application 114. 



-7- 



Process 200 further includes automatically identifying a set of regions of the 
interactive visual content in which the viewing application 114 is to display swap visual 
content when the trigger event occurs (block 210). For example, regions of the viewing 
visual content that are to be replaced by swap visual content when the trigger event occurs 
5 can be automatically identified. These regions of the viewing visual content are identified 

using the intermediate visual content. FIG. 3 is flow diagram of an operation 300 that can be 
performed on each region of the base visual content to identify automatically this set of 
regions of the viewing visual content. A given region of the base visual content is compared 
to the corresponding region of the intermediate visual content, if one exists (block 302), If 

10 there is a corresponding region of the intermediate visual content for the given region of the 
base visual content and the corresponding region of the intermediate visual content visually 
differs from that region of the base visual content (which is checked in blocks 304 and 306), 
then the region of the viewing visual content corresponding to that region of the base 
intermediate region is identified as a region in which swap visual content will be displayed 

1 5 when the trigger event occurs (block 308). 

In addition, process 200 includes automatically generating swap visual content from 
the intermediate visual content (block 212 shown in FIG. 2). Each region of the intermediate 
visual content that corresponds to a region of the viewing visual content that is to be replaced 
by swap content when the trigger event occurs is used to generate the swap visual content for 

20 that region of the viewing visual content. The swap visual content can be generated in the 
same general manner as the view visual content. 

Process 200 can also include generating instructions that cause the viewing 
application 1 14 to display the swap visual content in the identified regions of the interactive 
visual content when trigger event occurs (block 214). For example, the instructions can 

25 cause the viewing application to replace identified regions of the viewing visual content with 
swap visual content when the trigger event occurs. The instructions can be embedded in the 
interactive visual content or otherwise supplied to the viewing application 114. For example, 
the instructions can include JAVASCRIPT instructions that are embedded in an HTML 
document. 

30 One implementation of process 200 is shown in FIG. 4. FIG. 4 is a flow diagram of a 

process 400 for creating an interactive HTML document using a computer graphics program 
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102. The computer graphics program 102 can generate the visual components of the 
interactive HTML document, for example, from an image created by the designer 104 using 
the computer graphics program 102. Process 400 includes having the computer graphics 
program 102 receive base visual content (block 402). The designer can edit (which, as used 

5 herein, refers to both creating and modifying) the image in order to create base visual 

content, e.g., using image creation and editing features included in the computer graphics 
program 102. Other ways in which the base visual content can be received include retrieving 
the base visual content from electronic storage (e.g., by retrieving an image file containing 
the base visual content from a disk drive) and/or copying at least a portion of one or more 

10 other images. 

Then, the computer graphics program 102 generates a content division structure 
(block 404). The content division structure is used to divide the base visual content, the 
intermediate visual content, and the viewing visual content into multiple regions. The 
content division structure can be generated by dividing the image into multiple slices. The 

15 designer can create — using slice creation tools included in the computer graphics program 
102— one or more slices of the image. Then, the computer graphics program 102 can 
generate other slices so that a valid HTML table can be assembled and displayed using the 
portions of the image defined by the slices (including both the designer-created slices and the 
program-generated slices). For example, FIG. 5 A shows an example of an image 502 

20 displayed in a window 504 of the computer graphics program 102. In the example shown in 
FIG. 5A, the designer has created a first slice 506 using a slice creation tool included in the 
computer graphics program 102. The computer graphics program 102 then generates other 
slices 508, 510, 512, and 514 so that a valid HTML table can be assembled and displayed 
using the portions of the image 502 defined by the slices 506, 508, 510, 512, and 514. 

25 Then, the computer graphics program 102 receives a selection of a trigger slice (block 

406). The trigger slice can be received by having the designer identify one of the slices 
defined by the content division structure. For example, as shown in FIG. 5 A, the designer 
can select slice 506 as the trigger slice. The computer graphics program 102 then receives a 
selection of a trigger event associated with the trigger slice (block 408 shown in FIG. 4). 

30 Any event can be selected as the trigger event. The computer graphics program 102 can 

display one or more user interface elements, such as menus, windows, buttons, and the like, 
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by which the designer can select a trigger event for the trigger slice. For example, the 
computer graphics program 202 can receive a selection of a rollover event to associate with 
the trigger slice 506 of the image 502 shown in FIG. 5A. Such a rollover event occurs when 
the user 116 of the viewing application 114 moves the cursor over the trigger slice 506. A 
default trigger event can be used if the designer does not explicitly provide such a trigger 
event selection. 

Then, the computer graphics program 102 provides the designer with a user interface 
that allows the designer to edit intermediate visual content as an integral unit (block 410 of 
FIG. 4). Thus, the designer need not confine his or her edits to a pre-selected slice or region. 
Instead, the designer can freely edit the intermediate visual content without regard to slice or 
region boundaries. The designer can edit (which, as used herein, refers to both creating and 
modifying) the image in order to create intermediate visual content, e.g., using image 
creation and editing features included in the computer graphics program 102. As shown in 
FIG. 5B, the computer graphics program 102 can display the image 502 in the window 504 
after the designer has selected a trigger slice and a trigger event; to edit (that is, to create and 
modify) intermediate visual content, the designer can edit the image without regard to slice 
or region boundaries. For example, as shown in FIG. 5C, the designer can add a button 524 
to the image so that the button 524 is displayed instead of the button 522 (which is displayed 
as a part of the base visual content). Also, the designer can add a picture 520 of an inline 
skate to the image. The resulting intermediate visual content is shown in FIG. 5C. As shown 
in FIG. 5C, the intermediate visual content can also include portions of the base visual 
content. The computer graphics program 102 keeps track of which portions of the image are 
associated with the base visual content and/or the intermediate visual content in a 
conventional manner. 

When the designer has completed editing the various the image, the designer can 
cause the computer graphics program 102 to generate automatically a set of viewing image 
files containing viewing visual content derived from the base visual content (block 412 
shown in FIG. 4). The computer graphics program 102 can be programmed to generate a 
separate viewing image file for each of the slices of the base visual content. The computer 
graphics program 102 can be programmed to optimize each viewing image file for 
transmission over a computer network (e.g., by saving the viewing image file in a format that 
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minimizes the size of the file while still maintaining the desired image quality) and/or for 
display using web browsers (e.g., by mapping colors contained in the file to web-safe colors). 
Other types of image processing can be used to generate the viewing image files. The set of 
viewing image files are typically stored on a disk drive or other electronic storage medium. 

5 For example, a schematic representation of a set of viewing image files generated 

from the base visual content of the image 502 is shown in FIG. 6. The computer graphics 
program 102 can generate a viewing image file 606 containing viewing visual content 
derived from the trigger slice 506 of the base visual content. Also, the computer graphics 
program 102 can generate viewing image files 608, 610, 612, and 614 containing viewing 

10 visual content derived from the slices 508, 510, 512, and 514, respectively, of the base visual 
content. 

As a part of generating an interactive HTML document from the image, the computer 
graphics program 102 automatically identifies slices of the intermediate visual content that 
visually differ from corresponding slices of the base visual content (block 414 shown in FIG. 

15 4). In this way, the amount of swap visual content (which is generated from the identified 
slices of the intermediate visual content) can be reduced. This can reduce the time and 
resources necessary to transmit and display the swap visual content (especially over a 
computer network such as the Internet). One implementation of such an identification 
operation that is performed for each slice is shown in FIG. 7. The computer graphics 

20 program 102 can be programmed to perform, for a given slice of the intermediate visual 

content, a pixel-by-pixel comparison of that slice to the corresponding slice of the base visual 
content (block 702). If the computer graphics program 102 determines that any pixel in the 
slice of the intermediate visual content differs from the corresponding pixel in the 
corresponding slice of the base visual content (which is checked in block 704), the computer 

25 graphics program 102 identifies that slice of the intermediate visual content as visually 

differing from the corresponding slice of the base visual content (block 706). For example, 
after performing such a comparison between the intermediate and base visual content, the 
computer graphics program 102 identifies slices 506, 508, and 512 of the intermediate visual 
content as visually differing from corresponding slices of the base visual content. 

30 Another implementation of such an identification operation that is performed for each 

slice is shown in FIG. 11. The computer graphics program 102 can be programmed to 
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calculate a checksum for a given slice of the intermediate visual content and a checksum for 
the corresponding slice of the base visual content (blocks 1102 and 1104). For example, the 
computer graphics program 102 can calculate cyclic redundancy check (CRC) checksums, in 
a conventional manner, using the pixel data for the given slice of the intermediate visual 
content and the corresponding slice of the base visual content, respectively. The CRC 
checksums can be calculated each time the designer makes an edit that affects the slice of the 
intermediate visual content and/or the corresponding slice of the base visual content. Then, if 
the computer graphics program 102 determines that the checksum for the slice of the 
intermediate visual content differs from the checksum for the base visual content (which is 
checked in block 1106), the computer graphics program 102 identifies that slice of the 
intermediate visual content as visually differing from the corresponding slice of the base 
visual content (block 1108). The use of such checksums can improve the performance of 
such an identification operation. 

After identifying slices of the intermediate visual content that visually differ from 
corresponding slices of the base visual content, the computer graphics program 102 
automatically generates a set of swap image files containing swap visual content derived 
from the identified slices of the intermediate visual content (block 416 shown in FIG. 4). 
The set of swap image files includes a separate swap image file for each identified slice of 
the intermediate visual content. The computer graphics program 102 can be programmed to 
optimize each swap image file for transmission over a computer network (e.g., by saving the 
swap image file in a format that minimizes the size of the file while still maintaining the 
desired image quality) and/or for display using web browsers (e.g., by mapping colors 
contained in the file to web-safe colors). Other types of image processing can also be used to 
generate the swap image files. The set of swap image files are typically stored on a disk 
drive or other electronic storage medium. 

For example, a schematic representation of a set of swap image files generated from 
identified slices 506, 508, and 512 of the intermediate visual content is shown in FIG. 8. 
The computer graphics program 102 generates a swap image file 806 containing swap visual 
content derived from the trigger slice 506 of the intermediate visual content. Also, the 
computer graphics program 102 generates swap image files 808 and 812 containing swap 
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visual content derived from the slices 508 and 512, respectively, of the intermediate visual 
content. 

The computer graphics program 102 also generates HTML instructions that cause the 
viewing visual content contained in the viewing image files to be displayed as a valid HTML 

5 table (block 418 shown in FIG. 4). The instructions are included in the interactive HTML 
document and are executed by the viewing application 114 that displays the HTML 
document. The instructions arrange the visual content from each of the viewing image files 
so that the slice arrangement of the image is reproduced. For example, the instructions 
generated for the image 502 include instructions that cause the viewing application 1 14 to 

1 o display the viewing visual content contained in the viewing image files 606, 608, 6 1 0, 6 1 2, 
and 614 as shown in FIG. 9. This reproduces the slice arrangement of the image 502. As a 
result, the HTML table has a similar appearance to the base visual content of the image 502 
from which the HTML document was generated. 

The computer graphics program 102 also generates JAVASCRIPT instructions that 

15 cause the swap visual content to be displayed when the trigger event occurs to the trigger 
slice (block 420 shown in FIG. 4). The JAVASCRIPT instructions are embedded in the 
interactive HTML document and are executed by the viewing application 114 that displays 
the HTML document. For each swap image file associated with the interactive HTML 
document, the JAVASCRIPT instructions cause the viewing application 1 14 to replace the 

20 viewing visual content corresponding to that swap image file with the swap visual content 
contained in that swap image file when the trigger event occurs to the trigger slice. As a 
result, after trigger event occurs to trigger slice, the HTML table has a similar appearance to 
the intermediate visual content of the 502 image from which the HTML document was 
generated. 

25 For example, the JAVASCRIPT instructions generated for the image 502 include 

instructions that cause the viewing application 114 that displays the interactive HTML 
document generated from the image 502 to replace the viewing visual content from viewing 
image files 606, 608, and 612 displayed in the HTML table with the swap visual content 
from swap image files 806, 808, and 812, respectively, when a rollover event occurs to the 

30 trigger slice portion of the displayed HTML table, as shown in FIG. 10. 
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The JAVASCRIPT instructions can also include instructions that, when some other 
event occurs to the trigger slice, cause the viewing application to redisplay the viewing visual 
content that was replaced with the swap visual content. For example, if the trigger event is a 
rollover event, the other event can be an event associated with the user of the viewing 
application 114 moving the cursor off of the trigger slice. In such a case, the JAVASCRIPT 
instructions can include instructions that cause the viewing application 114 to replace in the 
HTML table the swap visual content from swap image files 806, 808, and 812 with the 
viewing visual content from viewing image files 606, 608, and 612, respectively, when the 
user of the viewing application 114 moves the cursor off of the trigger slice. 

An example of an interactive HTML document generated according to process 400 is 
shown in TABLE 1. The interactive HTML document shown in TABLE 1 includes 
embedded JAVASCRIPT instructions for displaying the viewing image files 606, 608, 610, 
612, and 614 in an HTML table. The embedded JAVASCRIPT instructions also include 
instructions for replacing viewing image files 606, 608, and 612 with the swap image files 
806, 808, and 812, respectively, when the trigger event occurs. The viewing image files 606, 
608, 610, 612, and 614 and the swap image files 806, 808, and 812 are stored together in a 



common "images" subdirectory associated with the interactive HTML document. 



20 



25 



<HTML> 
<HEAD> 

<TITLE>Sample< /TITLE > 

<META HTTP-EQUIV= "Content-Type" CONTENT=" text /html ; 
charset=iso-88 59-l M > 

<!-- ImageReady Preload Script ( Sample. png) --> 
<SCRIPT LANGUAGE = " JavaScript " > 
< ! - - 



30 



function newlmage (arg) { 

if (document . images) { 



rslt = new Image {) ; 
rslt.src = arg; 
return rslt; 



35 



40 



function changelmages { ) { 

if (document . images && (preloadFlag 
for (var i=0; 
i<changelmages . arguments . length; i+-2) { 



true) ) { 



document [changelmages . argument s [ i ] ] . src = 
changelmages .arguments [i+1] ; 
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5 var preloadFlag = false; 

function preloadlmages { ) { 

if (document . images) { 

Sample_01_Sample_03_over = 
newlmage { " image s/Sample_01 -Sample_03_over .png" ) ; 
-(0 Sample_03_over = 

newlmage ( 11 images/ Sample_0 3 -over . png" ) ; 

Sample_04_Sample_03_over = 
newlmage ( " images/Sample_04-Sample_03_over .png" ) ; 
preloadFlag = true; 

15 } 



// --> 
</SCRIPT> 

20 <!-- End Preload Script --> 

</HEAD> 

<B0DY BGC0L0R=#FFFFFF ONLOAD = "preloadlmages ();" > 
<!-- ImageReady Slices (Sample. png) 
<TABLE BORDER=0 CELLPADDING= 0 CELLSPACING^ 0 > 
25 <TR> 

<TD COLSPAN=3> 

<IMG NAME="Sample_01" 
SRC= ,, images/Sample_01.png" WIDTH=390 HE I GHT= 5 3 >< / TD > 
</TR> 

30 <TR> 

<TD ROWSPAN=2> 

<IMG SRC="images/Sample_02 .png" 
WXDTH=20 HEIGHT=187x/TD> 
<TD> 

35 <A HREF= "# " 

ONMOUSEOVER="changeImages ( 1 Sample__01 ' , 
1 images/Sample_01-Sample_03_over .png' , ' Sample_03 1 , 
' images/Sample_03 -over .png 1 , 'Sample__04' , 
40 1 images/Sample_04-Sample_03_over .pug' ) ; return true; " 

ONMOUSEOUT= n changeImages ( 1 Sample_01 * , 
• images/Sample_01.png' , 'Sample_03' , 
' images/Sample_03 .png 1 , 'Sample_04 ' , 
45 1 images/SampleJD4 .png' ) ; return true ; 11 > 

<IMG NAME= n Sample_03" 
SRC="images/Sample_03 .png" WIDTH=71 HEIGHT=31 
BORDER^ 0></Ax/TD> 

<TD ROWS PAN- 2 > 

5Q <IMG NAME= l, Sample_04 " 

SRC="images/Sample_04 .png" WIDTH=299 HEIGHT=187x/TD> 
</TR> 
<TR> 

<TD> 

55 <IMG SRC="images/Sample_05 .png" 

WIDTH=71 HEIGHT=156x/TD> 

</TR> 
</ TABLE > 
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<!-- End ImageReady Slices --> 

</BODY> 

</HTML> 



TABLE 1 



The invention can be implemented in digital electronic circuitry, or in computer 
hardware, firmware, software, or in combinations of them. Apparatus of the invention can be 

1 o implemented in a computer program product tangibly embodied in a machine-readable 
storage device for execution by a programmable processor; and method operations of the 
invention can be performed by a programmable processor executing a program of 
instructions to perform functions of the invention by operating on input data and generating 
output. The invention can be implemented advantageously in one or more computer 

15 programs that are executable on a programmable system including at least one programmable 
processor coupled to receive data and instructions from, and to transmit data and instructions 
to, a data storage system, at least one input device, and at least one output device. Each 
computer program can be implemented in a high-level procedural or object-oriented 
programming language, or in assembly or machine language if desired; and in any case, the 

20 language can be a compiled or interpreted language. Suitable processors include, by way of 
example, both general and special purpose microprocessors. Generally, a processor will 
receive instructions and data from a read-only memory and/or a random access memory. 
Generally, a computer will include one or more mass storage devices for storing data files; 
such devices include magnetic disks, such as internal hard disks and removable disks; 

25 magneto-optical disks; and optical disks. Storage devices suitable for tangibly embodying 
computer program instructions and data include all forms of non-volatile memory, including 
by way of example semiconductor memory devices, such as EPROM, EEPROM, and flash 
memory devices; magnetic disks such as internal hard disks and removable disks; magneto- 
optical disks; and CD-ROM disks. Any of the foregoing can be supplemented by, or 

30 incorporated in, ASICs (application-specific integrated circuits). 

To provide for interaction with a user, the invention can be implemented on a 
computer system having a display device such as a monitor or LCD screen for displaying 
information to the user and a keyboard and a pointing device such as a mouse or a trackball 
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by which the user can provide input to the computer system. The computer system can be 
programmed to provide a graphical user interface through which computer programs interact 
with users. 

A number of embodiments of the invention have been described. Nevertheless, it will 
be understood that various modifications may be made without departing from the spirit and 
scope of the invention. For example, method operations can be performed in different orders. 
Also, the interactive visual content can be generated using other languages and technologies 
including, for example, cascading style sheets and/or JAVA™ applets or applications. 
Accordingly, other embodiments are within the scope of the following claims. 
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WHAT IS CLAIMED IS: 



1 . A computer-implemented method of creating interactive visual content for display by a 
viewing application executing on a computer, the method comprising: 

receiving as an input a selection of a trigger event; 
receiving as an input intermediate visual content; 

automatically identifying a plurality of regions of the interactive visual content in which 
swap visual content is to be displayed by the viewing application when the trigger event occurs; 
and 

automatically generating the swap visual content from the intermediate visual content. 

2. The method of claim 1 , further comprising generating instructions operable to cause the 
computer executing the viewing application to display the swap visual content in the identified 
regions when the trigger event occurs. 

3 . The method of claim 1 , further comprising: 
receiving as an input base visual content; and 

automatically generating viewing visual content from the base visual content for display 
by the viewing application. 

4. The method of claim 3, wherein the trigger event is associated with the base visual 
content. 

5. The method of claim 3, further comprising providing a content division structure that 
divides the viewing visual content into a plurality of sections, and wherein automatically 
identifying the set of regions of the interactive visual content includes automatically identifying 
those sections of the visual content in which swap visual content is to be displayed by the 
viewing application when the trigger event occurs. 
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6. The method of claim 3, further comprising providing a content division structure that 
divides the viewing visual content into a plurality of sections, and wherein each section of the 
viewing visual content has a corresponding section in the base visual content. 

7. The method of claim 6, wherein automatically generating viewing visual content includes 
generating a viewing image file for each section of the viewing visual content. 

8. The method of claim 6, wherein the intermediate visual content includes a plurality of 
sections, each section of the intermediate visual content having a corresponding section of the 
base visual content. 

9. The method of claim 8, wherein automatically identifying those sections of the 
interactive visual content in which swap visual content is to be displayed by the viewing 
application when the trigger event occurs includes determining, for each section of the 
intermediate visual content, if the corresponding section of the base visual content visually 
differs from that section of the intermediate visual content. 

10. The method of claim 9, wherein a pixel-by-pixel comparison is performed in order to 
determine, for each section of the intermediate visual content, if the corresponding section of the 
base visual content visually differs from that section of the intermediate visual content. 

11. The method of claim 9, wherein automatically identifying those sections of the viewing 
visual content in which swap visual content is to be displayed by the viewing application when 
the trigger event occurs includes, for each section of the intermediate visual content: 

calculating an intermediate checksum for that section of the intermediate visual content; 
calculating a base checksum for the corresponding section of the base visual content; and 
if the intermediate checksum differs from the base checksum, identifying the section of 
the viewing visual content associated with that section of the intermediate visual content as a 
section in which swap visual content is to be displayed by the viewing application when the 
trigger event occurs. 
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12. The method of claim 9, wherein generating the swap visual content includes generating, 
for each section of the intermediate visual content that visually differs from the corresponding 
section of the base visual content, a swap image file derived from that section of the intermediate 
visual content. 

1 3 . The method of claim 3 , further comprising: 

providing a content division structure that divides the viewing visual content into a 
plurality of sections; and 

generating instructions operable to cause the computer executing the viewing application 
to display the sections of the viewing visual content in a table. 

14. The method of claim 1 , wherein receiving intermediate visual content includes providing 
a user interface enabling a designer to edit intermediate visual content as an integral unit. 

15. A computer program product, tangibly stored on a computer-readable medium, for 
generating interactive visual content to be displayed by a viewing application executing on a 
computer, comprising program instructions operable to cause a programmable processor to: 

receive as an input a selection of a trigger event associated; 
receive as an input intermediate visual content; 

automatically identify a set of regions of the interactive visual content in which swap 
visual content is to be displayed by the viewing application when the trigger event occurs; and 
automatically generate the swap visual content from the intermediate visual content. 

1 6. The computer program product of claim 15, further comprising program instructions 
operable to cause the programmable processor to generate output instructions operable to cause 
the computer executing the viewing application to display the swap visual content in the 
identified regions when the trigger event occurs. 



-20- 



17. The computer program product of claim 15, further comprising program instructions 
operable to cause the programmable processor to: 

receive as an input base visual content; and 

automatically generate viewing visual content derived from the base visual content for 
display by the viewing application. 

18. The computer program product of claim 17, wherein the trigger event is associated with 
the base visual content. 

19. The computer program product of claim 17, further comprising program instructions 
operable to cause the programmable processor to: 

provide a content division structure that divides the viewing visual content into a plurality 

of sections; and 

automatically identify those sections of the visual content in which swap visual content is 
to be displayed by the viewing application when the trigger event occurs. 

20. The computer program product of claim 17, further comprising program instructions 
operable to cause the programmable processor to provide a content division structure that divides 
the viewing visual content into a plurality of sections, and wherein each section of the viewing 
visual content has a corresponding section in the base visual content. 

21. The computer program product of claim 20, further comprising program instructions 
operable to cause the programmable processor to generate a viewing image file for each section 
of the viewing visual content. 

22. The computer program product of claim 20, wherein the intermediate visual content 
includes a plurality of sections, each section of the intermediate visual content having a 
corresponding section of the base visual content. 

23. The computer program product of claim 22, further comprising program instructions 
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operable to cause the programmable processor to determine, for each section of the intermediate 
visual content, if the corresponding section of the base visual content visually differs from that 
section of the intermediate visual content. 

24. The computer program product of claim 23, wherein a pixel-by-pixel comparison is 
performed in order to determine, for each section of the intermediate visual content, if the 
corresponding section of the base visual content visually differs from that section of the 
intermediate visual content. 

25 . The computer program product of claim 23 , further comprising program instructions 
operable to cause the programmable processor to, for each section of the intermediate visual 
content: 

calculate an intermediate checksum for that section of the intermediate visual content; 
calculate a base checksum for the corresponding section of the base visual content; and 
if the intermediate checksum differs from the base checksum, identify the section of the 
viewing visual content associated with that section of the intermediate visual content as a section 
in which swap visual content is to be displayed by the viewing application when the trigger event 
occurs. 

26. The computer program product of claim 23, further comprising program instructions 
operable to cause the programmable processor to generate, for each section of the intermediate 
visual content that visually differs from the corresponding section of the base visual content, a 
swap image file derived from that section of the intermediate visual content. 

27. The computer program product of claim 1 7, further comprising program instructions 
operable to cause the programmable processor to: 

provide a content division structure that divides the viewing visual content into a plurality 
of sections; and 

generate output instructions operable to cause the computer executing the viewing 
application to display the sections of the viewing visual content in a table. 
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28. The computer program product of claim 15, further comprising program instructions 
operable to cause the programmable processor to provide a user interface enabling a designer to 
edit intermediate visual content as an integral unit 

29. A computer-implemented method of creating interactive visual content for display by a 
viewing application executing on a computer, the method comprising: 

receiving as an input a selection of a trigger event; 

receiving as an input a selection of a trigger region of the interactive visual content 
associated with the trigger event; 

receiving as an input intermediate visual content; 

automatically identifying a set of swap regions of the interactive visual content in which 
swap visual content is to be displayed by the viewing application when the trigger event occurs 
to the trigger region; and 

automatically generating the swap visual content from the intermediate visual content. 

30. The method of claim 29, further comprising generating instructions operable to cause the 
computer executing the viewing application to display the swap visual content in the identified 
regions when the trigger event occurs. 

3 1 . The method of claim 29, further comprising: 
receiving as an input base visual content; and 

automatically generating viewing visual content from the base visual content for display 
by the viewing application. 

32. The method of claim 3 1 , wherein the trigger region is associated with the base visual 
content. 

33. The method of claim 3 1 , further comprising providing a content division structure that 
divides the viewing visual content into a plurality of sections, and wherein automatically 
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identifying the set of regions of the interactive visual content includes automatically identifying 
those sections of the visual content in which swap visual content is to be displayed by the 
viewing application when the trigger event occurs. 
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ABSTRACT 

A system and method of creating interactive visual content in which base visual 
content, a selection of a trigger event associated with the base visual content, and 
intermediate visual content are received as an input. Viewing visual content derived from the 
base visual content is automatically generated. The viewing visual content can be displayed 
by a viewing application executing on a computer. A set of regions of the interactive visual 
content in which swap visual content is to be displayed by the viewing application when the 
trigger event occurs is automatically generated. For example, regions of the viewing visual 
content that are to be replace by the swap visual content when the trigger event occurs can be 
identified. Also, the swap visual content is automatically generated from the intermediate 
visual content. In addition, instructions operable to cause the computer executing the 
viewing application to display the swap visual content in the identified regions when the 
trigger event occurs is automatically generated. Moreover, the intermediate visual content 
can be received by providing a user interface enabling a designer to edit the intermediate 
visual content as an integral unit. 



25 




Application 




FIG. 1 



200 



Receive Base Visual Content 



202 

W 



Receive Selection of Trigger Event 
associated with the Base Visual 



204 

w 



Receive Intermediate Visual Content 



206 

w 



Automatically Generate Viewing Visual 
Content Derived from Base Visual 
Content 



208 

w 



Automatically Identify a Set of Regions 
of Interactive Visual Content in which to 
Display Swap Visual Content when 
Trigger Event Occurs 



210 

w 



Automatically Generate Swap Visual 
Content from the Intermediate Visual 
Content 



212 

w 



Automatically Generate Instructions to 
Display Swap Visual Content 



214 

w 



FIG. 2 



300 



Compare Region of Base Visual 
Content to Corresponding Region of 
Intermediate Visual Content 



302 

w 




FIG. 3 



402 



404 

VI 



406 



408 

VI 



410 

VI 



Receive Base Visual Content 



Generate Content Division Structure 



Receive Trigger Slice Selection 



Receive Trigger Event Selection 



Provide User Interface allowing 
Designer to Edit Intermediate Visual 
Content as an Integral Unit 



412 Automatically Generate a Set of 
\jv Viewing Image Files Containing 
^ Viewing Visual Content Derived from 
the Base Visual Content 



Automatically Identify Slices of the 414 
Intermediate Visual Content that fj 

Visually Differ from Corresponding 
Slices of the Base Visual Content 



Automatically Generate Set of Swap 41 6 
Image Files Containing Swap Visual 
Content Derived from the Identified 
Intermediate Slices 



Generate HTML Instructions 



418 

w 



Generate JAVASCRIPT instructions 



420 

W 



400 



FIG. 



4 



508 





FIG. 5B 




FIG. 5C 



606 



608 



610 



VP 




f HOME \< 



PC?* 



614 



612 



FIG. 6 



702 

Perform Pixel-by-Pixel Comparison of *J 
Intermediate Slice to Corresponding v 
Base Slice 




c 



Done 



FIG. 7 



Black Diamond 




FIG. 10 



1102 



Calculate Checksum for Slice of 
Intermediate Visual Content 



w 



1104 



Calculate Checksum for Slice of Base 
Visual Content 



w 




FIG. 11 



